<script setup>
import { onMounted, ref } from "vue";
import { getMyBlogsById, deleteBlogById } from "@/api/blogs";
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const  router = useRouter()

//加载数据
const loading = ref(true);
const lists = ref([]);

const UserId = ref();

//获得轮播图数据
const getblogs = async () => {
  if(!localStorage.getItem("token")){
    router.push("/login")
    return; 
  }
  const id = JSON.parse(localStorage.getItem("token")).id;
  const result = await getMyBlogsById(id);
  if (result.code) {
    lists.value = result.data;
  }
}

onMounted(() => {
  loading.value = false;
  getblogs();
});

const deleteBlog = (id) => {
  ElMessageBox.confirm(
    '您确认删除么',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then( async () => {
        const result = await deleteBlogById(id);
        if (result.code) {
          ElMessage.success("删除成功");
          getblogs();
        } else {
          ElMessage.error("删除失败");
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}

const toAdd = () => {
  router.push('addblog');
}
</script>

<template>

  <div style="display: flex; justify-content: flex-end;">
    <el-button type="primary" round @click="toAdd">
      <el-icon><Plus /></el-icon> 新建
    </el-button>
  </div>

  <div class="body">
    <el-skeleton
      style="display: flex; gap: 8px"
      :loading="loading"
      animated
      :count="3"
    >
    <!-- 骨架 -->
      <template #template>
        <div style="flex: 1">
          <el-skeleton-item variant="image" style="height: 240px" />
          <div style="padding: 14px">
            <el-skeleton-item variant="h3" style="width: 50%" />
            <div
              style="
                display: flex;
                align-items: center;
                justify-items: space-between;
                margin-top: 16px;
                height: 16px;
              "
            >
              <el-skeleton-item variant="text" style="margin-right: 16px" />
              <el-skeleton-item variant="text" style="width: 30%" />
            </div>
          </div>
        </div>
      </template>

      <template #default>
        <div
          style="
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center;
            box-sizing: border-box; 
          "
        >
          <el-card
            v-for="item in lists"
            :key="item.name"
            :body-style="{ padding: '15px' }"
            style="width: 24%;
            box-sizing: border-box;
            margin-bottom: 16px"
          >
          <router-link :to="{name: 'readblog',params: {id: item.id}}">
            <img
              :src="item.image"
              class="image multi-content"
              style="max-width: 100%;
              display: block;
              height: 240px;
              "
            />
            <div style="padding: 14px">
              <span class="card_title">{{ item.title }}</span>
              <div class="card_time">{{ item.createTime.split('T')[0] }}</div>
            </div>
          </router-link>
          <el-button type="danger" plain @click="deleteBlog(item.id)" >删除</el-button>
          </el-card>
        </div>
      </template>
    </el-skeleton>
  </div>
  
</template>

<style scoped>
.card_time {
  color: #ccc;
}

a {
  text-decoration: none; 
  color: inherit; 
}
</style>
